<template>
    <view>
        <view class="ask">
            <view class="title">
                {{ question.title }}
            </view>
            <view class="user" v-if="question.isAnonymous == 1">
                <image src="../../static/anymous.png" mode=""></image>
                <view class="">
                    匿名用户
                </view>
            </view>
            <view class="user" v-else>
                <image :src="question.avatar" mode="" style="border-radius: 100%"></image>
                <view class="">
                    {{ question.userName }}
                </view>
            </view>
            <view class="text">
                {{ question.msg }}
            </view>
            <view class="time">
                <view class="left">
                    {{ getTime(question.createTime) }}发表文章
                </view>
                <view class="right">
                    #{{ question.typeTitle }}#
                </view>
            </view>
        </view>
        <view class="answer" v-for="(item,index) in answers" :key="index">
            <view class="user">
                <view class="left">
                    <image :src=item.avatar mode=""></image>
                    <view class="message">
                        <view class="name">
                            {{ item.userName }} <text @click="particulars(item.replyUserId)">立即咨询</text>
                        </view>
                        <view class="label">
                            {{ item.levelInfo }}
                        </view>
                    </view>
                </view>
                <view class="right">
                    {{ getTime(item.createTime) }}
                </view>
            </view>
          <view class="mp3" v-if="item.replyMsg.startsWith('http') || item.replyMsg.startsWith('wxfile')">
            <view @click="begin(item.replyMsg)">
              <text v-if="show">开始播放</text>
              <text v-if="show2">正在播放</text>
              <text v-if="show3">已经暂停</text>
            </view>
          </view>
            <view class="text" v-else>
                {{ item.replyMsg }}
            </view>
        </view>
        <view class="record" :class="recording?'':'hidden'">
            <view class="ing" :class="willStop?'hidden':''">
                <view class="icon luyin2"></view>
            </view>
            <view class="cancel" :class="willStop?'':'hidden'">
                <view class="icon chehui"></view>
            </view>
            <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
        </view>

        <view class="flex-row section_7" v-if="status">
            <image
                src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558563014322546286.png"
                class="image_18"  @click="qiehuan"/>
            <view class="voice-mode" style="border: 1rpx solid red;width: 60vw;text-align: center;border-radius: 100rpx;border:1rpx solid #999;padding: 10rpx 0;color: #666;font-size: 30rpx;" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
            <input type="text"  v-if="!isVoice" v-model="value" placeholder="请输入您想回复的内容..."
                style="width: 55vw;background-color:#eee;padding: 10rpx 20rpx;border-radius: 50rpx;"
                placeholder-style="font-size:20rpx">
            <view class="flex-col items-center text-wrapper_1" @click="sendMessage"><text class="text_32">发送消息</text>
            </view>
        </view>


    </view>
</template>

<script>
    import {
        detailAnswer,
        detailQuestion,
        updateReadNum
    } from "../../api";
    import {addAnswer} from "../../api/api";

    export default {
        data() {
            return {
                indecs:0,// 0用户 1 专家
                question: {},
                answers: [],
                show: true,
                show2: false,
                show3: false,
                innerAudioContext: '',
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    questionId: 0
                },
                value: '',


                //录音相关参数
                // #ifndef H5
                //H5不能录音
                RECORDER: uni.getRecorderManager(),
                // #endif
                isVoice: false,
                voiceTis: '按住 说话',
                recordTis: "手指上滑 取消发送",
                recording: false,
                willStop: false,
                initPoint: {
                    identifier: 0,
                    Y: 0
                },
                recordTimer: null,
                recordLength: 0,
				status:false
            };
        },
        onLoad(option) {
            let data = JSON.parse(decodeURIComponent(option.data))
			console.log(data)
			if(data.indecs != 0){
				this.status = true
			}
            this.indecs=data.indecs
            console.log("谁进入",this.indecs);
            this.pageInfo.questionId = data.questionId
            this.questionOne()
            this.answerList()
            this.updateReadNum()
            this.innerAudioContext = uni.createInnerAudioContext();
            this.innerAudioContext.autoplay = false;
            // #ifndef H5
            //录音开始事件
            this.RECORDER.onStart((e) => {
                console.log("111111");
             	  this.recordBegin(e);
            })
            //录音结束事件
            this.RECORDER.onStop((e) => {
                console.log("222222");
                this.recordEnd(e);
            })
            // #endif
        },
        onHide() {
            this.innerAudioContext.stop()
            this.show = true
            this.show2 = false
            this.show3 = false
        },

        onUnload() {
            this.innerAudioContext.stop()
            this.show = true
            this.show2 = false
            this.show3 = false
        },
        onReachBottom() {
            this.pageInfo.pageNum += 1
            this.answerList()
        },
        methods: {
            qiehuan(){
                this.isVoice=!this.isVoice
                console.log( this.isVoice);
            },
            // 录音开始
            voiceBegin(e) {
                console.log(e,'录音开始');
               	if (e.touches.length > 1) {
                    return;
                }
            	   this.initPoint.Y = e.touches[0].clientY;
              	 this.initPoint.identifier = e.touches[0].identifier;
                this.RECORDER.start({
                    format: "mp3"
                }); //录音开始,
            },
            //录音开始UI效果
            recordBegin(e) {
                   console.log(e,'录音开始UI效果');
                this.recording = true;
              	 this.voiceTis = '松开 结束';
                this.recordLength = 0;
                this.recordTimer = setInterval(() => {
                		  this.recordLength++;
              	 }, 1000)
            },
            // 录音被打断
            voiceCancel() {
                console.log('录音被打断');
                this.recording = false;
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送'
                this.willStop = true; //不发送录音
                this.RECORDER.stop(); //录音结束
            },
            // 录音中(判断是否触发上滑取消发送)
            voiceIng(e) {
                console.log(e,'录音中');
                if (!this.recording) {
             		     return;
                }
                let touche = e.touches[0];
                //上滑一个导航栏的高度触发上滑取消发送
                if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
                		  this.willStop = true;
             		     this.recordTis = '松开手指 取消发送'
                } else {
                    this.willStop = false;
               		   this.recordTis = '手指上滑 取消发送'
                }
            },
            // 结束录音
            voiceEnd(e) {
              	 if (!this.recording) {
              		    return;
            	   }
                this.recording = false;
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送'
            	   this.RECORDER.stop(); //录音结束
            },
            //录音结束(回调文件)
            recordEnd(e) {
                clearInterval(this.recordTimer);
                if (!this.willStop) {
            	       console.log("e: " + JSON.stringify(e));
                    let msg = {
                        length: 0,
                    			 url: e.tempFilePath
                    }
                    let min = parseInt(this.recordLength / 60);
                    let sec = this.recordLength % 60;
                    min = min < 10 ? '0' + min : min;
            	       sec = sec < 10 ? '0' + sec : sec;
               		   msg.length = min + ':' + sec;
                       console.log("文件回调",msg); //msg.url路径  msg.length 时长

                  let that = this
                    uni.showModal({
                    	title: '提示',
                    	content: '确定发送',
                    	success: function (res) {
                    		if (res.confirm) {
                    			console.log('用户点击确定');
                          let data = {
                            qid: that.question.id,
                            replyMsg: msg.url
                          }
                          addAnswer(data).then(res => {
                            msg.url = ''
                            that.answers.push(res.data)
                          })
                    		} else if (res.cancel) {
                    			console.log('用户点击取消');
                    		}
                    	}
                    })


                    // const innerAudioContext = uni.createInnerAudioContext();
                    // innerAudioContext.autoplay = true;
                    // innerAudioContext.src = msg.url
                    // innerAudioContext.onPlay(() => {
                    //   console.log('开始播放');
                    // });
                    // innerAudioContext.onError((res) => {
                    //   console.log(res.errMsg);
                    //   console.log(res.errCode);
                    // });
                } else {
            		      console.log('取消发送录音');
                }
                this.willStop = false;
            },




            sendMessage() {
              if (!this.value) {
                uni.showToast({
                  title: '输入不能为空!',
                  icon: 'none'
                })
                return
              }
              let data = {
                qid: this.question.id,
                replyMsg: this.value
              }
              addAnswer(data).then(res => {
                this.value = ''
                this.answers.push(res.data)
              })
            },
            updateReadNum() {
                updateReadNum(this.pageInfo.questionId).then(res => {

                })
            },
            questionOne() {
                detailQuestion(this.pageInfo.questionId).then(res => {
                    this.question = res.data
                  console.log('this.question', this.question)
                })
            },
            answerList() {
                detailAnswer(this.pageInfo).then(res => {
                    this.answers = this.answers.concat(res.rows)
                    console.log('answers', this.answers)
                })

            },
            particulars(replyUserId) {
                uni.navigateTo({
                    url: '/pages/userSide/particulars?id=' + replyUserId
                })
            },
            begin(src) {
                this.innerAudioContext.src = src
                if (this.show == true) {
                    this.innerAudioContext.play()
                    this.innerAudioContext.onPlay(() => {
                        console.log('开始播放');
                        this.show = false
                        this.show2 = true
                        this.show3 = false
                    });
                } else if (this.show2 == true) {
                    this.innerAudioContext.pause()
                    this.show = false
                    this.show2 = false
                    this.show3 = true
                } else {
                    this.innerAudioContext.play()
                    this.show = false
                    this.show2 = true
                    this.show3 = false
                }
                this.innerAudioContext.onEnded((res) => {
                    this.show = true
                    this.show2 = false
                    this.show3 = false
                });
            },
            suspend() {

            },

            getTime(time) {
                let oldDate = new Date(time)
                let nowDate = new Date()

                let subTime = (nowDate - oldDate) / 1000

                let hours = parseInt(subTime / 3600)
                if (hours < 24) {
                    return hours + '小时前'
                }

                let day = parseInt(subTime / (60 * 60 * 24))
                if (day < 7) {
                    return day + '天前'
                }

                return time
            }
        }
    }
</script>

<style lang="scss">
    @import "@/static/HM-chat/css/style.scss";
    .ask {
        padding: 4vw;
        border-bottom: 15rpx solid #E5E5E5;

        .title {
            font-size: 30rpx;
            color: #333;
            margin: 10rpx 0
        }

        .user {
            display: flex;
            align-items: center;

            image {
                width: 70rpx;
                height: 70rpx;
                margin-right: 17rpx;
            }

            view {
                font-size: 24rpx;
                color: #999;
            }
        }

        .text {
            margin: 20rpx 0;
            font-size: 26rpx;
            color: #333;
            line-height: 50rpx;
        }

        .time {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                font-size: 24rpx;
                color: #999;
            }

            .right {
                font-size: 24rpx;
                color: #3098EA;
            }
        }
    }

    .answer {
        padding: 4vw;
        background-color: #fff;
        border-bottom: 1rpx solid #E5E5E5;

        .user {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                align-items: center;

                image {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 200rpx;
                    margin-right: 13rpx;
                }

                .message {
                    .name {
                        font-size: 28rpx;
                        color: #333333;
                        display: flex;
                        align-items: center;

                        text {
                            margin-left: 13rpx;
                            display: inline-block;
                            font-size: 22rpx;
                            color: #3098EA;
                            border: 1rpx solid #3098EA;
                            border-radius: 50rpx;
                            padding: 5rpx 15rpx;
                        }
                    }

                    .label {
                        font-size: 24rpx;
                        color: #666;

                    }
                }
            }

            .right {
                font-size: 24rpx;
                color: #999;

   }
        }

        .text {
            margin: 20rpx 0;
            font-size: 26rpx;
            color: #333;
            line-height: 50rpx;
        }

        .mp3 {
            view {
                width: 80vw;
                line-height: 60rpx;
                text-align: center;
                background-image: linear-gradient(to right, #6CBEFF, #1989E1);
                color: #fff;
                font-size: 24rpx;
                margin: 20rpx auto;
                border-radius: 100rpx;
            }
        }
    }

    .section_7 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.59rem 0.75rem 3rem 0.81rem;
        width: 100vw;
        background-color: #ffffff;
        box-shadow: 0px 0.13rem 0.63rem #6060601c;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .text-wrapper_1 {
        padding: 0.59rem 0 0.56rem;
        flex-shrink: 0;
        background-color: #7c85ff;
        border-radius: 0.91rem;
        width: 4.38rem;
        height: 1.81rem;
    }

    .text_32 {
        color: #ffffff;
        font-size: 0.69rem;
        font-family: SourceHanSansCN;
        line-height: 0.66rem;
    }

    .image_18 {
        flex-shrink: 0;
        width: 2.06rem;
        height: 2.06rem;
    }

</style>
